<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="importByDate">
    <!--<i class="fa fa-download" aria-hidden="true" title="下载模板" @click="downloadGeneral"-->
    <!--style="margin-top: 10px;float: left;cursor:pointer;margin-left: 40px"></i>-->
    <el-upload v-if="hasRole('plan:device:export')" class=" fileselect" style="text-align: left;float:left;" action="/autoMonitor/by/insertDeviceExcel" ref="fileUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :auto-upload="true">
      <el-button type="primary" style="padding: 5px 9px !important;border-radius: 13px;" class="buttonAdd"><i class="el-icon-upload"></i> 导入Excel</el-button>
    </el-upload>
    <div style="cursor: pointer;float:left; margin-left:10px;" @click="downloadGeneral"> 
      <el-button type="success" style="padding: 5px 9px !important;border-radius: 13px;" class="buttonAdd"><i class="el-icon-download"></i> 模板下载</el-button>
      <!-- <img src="../../../assets/images/down-temp.png" style="width:17px;margin-right: 5px;margin-bottom: -3px" title="下载模板"> 
      <span style="font-family: inherit;font-size: 14px">模板下载</span>  -->
    </div>
    <wh-table :extendType="true" class="wutable_zl" :tableLoading="tableLoading" :tableData="tableData" :tableHeader="tableHeader" :isBorder="false" :isStrip="true" :option="option">
      <template slot="extendSlot" slot-scope="props">
        <el-table :data="props.row.children" width="60%" border>
          <el-table-column prop="date" label="保养日期"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column prop="level" label="保养级别"></el-table-column>
        </el-table>
      </template>
    </wh-table>
    <form action="/autoMonitor/by/exportExcelData" method="post" style="display: none;" ref="downloadGenaralTemplate"> <input name="json" :value="templateExcel.json" /> <input name="title" value="模板" /> </form>
  </div>
</template>
<script>
  import whTable from '@/components/wh-table/index.vue'
  import { sortObject } from "@/utils/common.js"
  import { getLastDay } from "@/utils/common.js"
  export default {
    nameL: 'importByDate',
    data() {
      return {
        tableData: [],
        tableHeader: [],
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: '#000000cc'
          }
        },
        tableLoading: true,
        templateExcel: {
          json: ""
        },
        mouthCount: 12,
      }
    },
    components: {
      whTable
    },
    mounted() {
      this.getImportExcel();
    },
    methods: {
      getImportExcel() {
        let self = this;
        self.$http({
          url: "/autoMonitor/by/queryByDeviceList",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            self.tableLoading = false;
            self.handleTable(resp.result);
            self.setImportTemplate();
          }
        });
      },
      handleTable(result) {
        let devices = result.devices;
        let mouthCount = result.mouthCount;
        this.mouthCount = mouthCount;
        let mouthLevel = result.level ? result.level.split(",") : ["一级", "二级"];
        let tableHeader = [{ "columnName": "deviceName", "coloumNameCn": "产品名称" }, 
        										{ "columnName": "deviceCode", "coloumNameCn": "产品编号" }];
        let tableData = [];
        for(let i = 1; i <= mouthCount; i++) {
          let header = { "columnName": i + "", "coloumNameCn": i + "月" };
          tableHeader.push(header);
        }
        this.tableHeader = tableHeader;
        if(devices) {
          for(let _data of devices) {
            let mouths = _data.mouths;
            if(mouths) {
              for(let _m of mouths) {
                if(_m && mouthLevel.includes(_m.byLevel)) {
                  _data[_m.byMouth] = _m.byLevel;
                }
              }
            }
            _data.children = [];
            tableData.push(_data)
          }
        }
        this.tableData = tableData;
        this.handleExpandRow();
      },
      handleExpandRow() {
        for(let data of this.tableData) {
          let now = new Date();
          let year = now.getFullYear();
          sortObject(data.mouths, "byMouth");
          let array = [];
          for(let _m of data.mouths) {
            if(_m.byLevel) {
              let mouth = parseInt(_m.byMouth);
              let d = getLastDay(year, mouth);
              let _child = {
                date: d,
                deviceName: data.deviceName,
                level: _m.byLevel
              };
              array.push(_child);
            }
          }
          data.children = array;
        }
      },
      setImportTemplate() {
        let header = {
          tableHeader: ["产品名称", "产品编号"]
        };
        for(let i = 1; i <= this.mouthCount; i++) {
          let str = i + "月";
          header.tableHeader.push(str);
        }
        this.templateExcel.json = JSON.stringify(header);
      },
      handleUploadSuccess(resp) {
        let self = this;
        self.$notify({
          title: '文件',
          message: '上传成功',
          type: 'success'
        });
        self.getImportExcel();
      },
      handleUploadError() {
        let self = this;
        self.$notify({
          title: '文件',
          message: '上传失败',
          type: 'success'
        });
      },
      downloadGeneral() {
        let self = this;
        self.$refs.downloadGenaralTemplate.submit();
      }
    },
    watch: {}
  }
</script>
<style>
  .importByDate .el-table td,
  .el-table th.is-leaf {
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }
  .importByDate .el-table .noLastColor {
    background: #ffffff;
  }
  .importByDate .historyTable .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #e9f4fb;
  }
  .importByDate .el-table td {
    cursor: pointer;
  }
  .importByDate .el-table__header td,
  .importByDate .el-table__header th,
  .importByDate .el-table__row td {
    border-right: 0px solid #EBEEF5 !important;
  }
  .importByDate .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }
  .importByDate .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 3px;
    font-size: 12px;
    border-radius: 3px;
  }
  #excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .importByDate .el-upload-list {
    display: none;
  }
  .importByDate .el-table__expanded-cell .el-table {
    width: 70%;
  }
  .importByDate .el-table__expanded-cell .el-table thead th,
  .importByDate .el-table__expanded-cell .el-table thead tr {
    background-color: rgb(214, 215, 216);
  }
</style>